/*
 * @Description: 环状图
 * @Author: Vergil
 * @Date: 2021-09-15 10:06:45
 * @LastEditTime: 2021-09-15 13:18:27
 * @LastEditors: Vergil
 */

import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts' // 导入 ECharts

// 定义 PropsType
const PropsType = {
  color: {
    type: String,
    default: '0,0,0'
  },
  chartName: {
    type: String,
    required: true
  },
  value: {
    type: Number,
    default: 70
  }
}

export default defineComponent({
  name: 'RingChart',
  props: PropsType,
  setup(props) {
    const chartRef = ref(null) // 创建一个 ref 用于获取 DOM 元素的引用
    const chartInstance = ref(null) // 创建一个 ref 用于存储 ECharts 实例

    // 初始化 ECharts 配置项
    const option = ref({
      title: {
        text: props.chartName,
        textStyle: {
          color: `rgba(${props.color}, 1)`
        },
        left: 'center'
      },
      series: [
        {
          name: '业务指标',
          type: 'gauge',
          radius: '70%',
          min: 0,
          max: 100,
          detail: {
            valueAnimation: true,
            formatter: (value) => `${value}`,
            fontSize: 20,
            color: `rgba(${props.color}, 1)`,
            offsetCenter: [0, 40]
          },
          data: [
            {
              value: props.value
            }
          ],
          axisLine: {
            lineStyle: {
              color: [[1, `rgba(${props.color}, .5)`]], // 使用 props.color 设置圆圈颜色
              width: 13
            }
          }
        }
      ]
    })

    // 初始化图表实例
    const initChart = () => {
      if (chartRef.value && !chartInstance.value) {
        chartInstance.value = echarts.init(chartRef.value)
      }
    }

    // 更新图表
    const updateChart = () => {
      if (chartInstance.value) {
        chartInstance.value.setOption(option.value, true)
      }
    }

    // 组件挂载后初始化图表
    onMounted(() => {
      initChart()
      updateChart()
    })

    // 监听 props.value 的变化
    watch(
      () => props.value,
      (newValue) => {
        option.value.series[0].data[0].value = newValue
        updateChart()
      }
    )

    // 组件卸载前销毁图表实例
    onBeforeUnmount(() => {
      if (chartInstance.value) {
        chartInstance.value.dispose()
      }
    })

    return () => (
      <div ref={chartRef} className="ringChart" style={{ width: '33%', height: '100%' }}>
        {/* 确保你的项目中有一个 <div> 元素用于 ECharts 的容器 */}
      </div>
    )
  }
})
